<template>
  <p>hello{{ msg }}</p>
  <p>数字时:{{ num }}</p>
  <p>子组件传过来的数据:{{ zz }}</p>
  <button @click="changeValue">点击修改数字</button>
  <hr />
  <HelloWold @hash="getValue" :vis="20"></HelloWold>
</template>

<script>
import { ref } from "vue";
import HelloWold from "./components/helloWold.vue";
export default {
  components: { HelloWold },
  name: "app",
  data() {
    return {
      price: "",
    };
  },
  setup() {
    let msg = ref("年后");
    let num = ref(20);

    let zz = ref(0);
    // let zz;

    function changeValue() {
      //在函数中能使用this
      console.log(num);
      // num.value += 2;
      this.num += 3;
    }

    //向子组件中传递参数
    function getValue(val) {
      console.log("子组件传递过来的数据", val);
      // this.zz = ref(val);
      zz.value = ref(val);
    }
    return {
      msg,
      num,
      changeValue,
      getValue,
      zz,
    };

    // return () => h("button", "这个是vue3返回的解构");
  },
};
</script>

<style>
</style>
